<template>
  <div class="whl-finance-child scroll-view">
   <StoreChoice
        ref="StoreChoice"
        :current="store"
        :multipleChoice="false"
        :hasTotal="false"
        v-on:listenToStoreSelect="getSelectStoreValue"
      />
    <customHeader :middleTitle="title" @leftCallBack="goBack" />
    <div class="page-body">
      <mt-swipe :auto="3000" class="whl-banner">
        <mt-swipe-item v-for="item in bannerList" :key="item.id">
          <img :src="item.imgUrl" alt="" class="whl-banner-img" @click="goPage(1, item.router)">
        </mt-swipe-item>
      </mt-swipe>
      <div class="whl-box">
        <div>
          <!-- <div @click="openshop('zhifushenqing')"> -->
            <div @click="goPage(3)">
            <img src="../../assets/images/zhifushenqing-tb.png" alt="">
            <p>开通支付申请</p>
          </div>
          <div @click="openshop('jijubangdi')">
            <img src="../../assets/images/jijubangding-tb.png" alt="">
            <p>机具绑定</p>
          </div>
          <div @click="openshop('yinxiangbangdi')">
            <img src="../../assets/images/yinxiangbangding-tb.png" alt="">
            <p>音响绑定</p>
          </div>
          <div @click="openshop('jijujiebang')">
            <img src="../../assets/images/jijujiebang-tb.png" alt="">
            <p>机具解绑</p>
          </div>
          <div @click="goPage(3)">
            <img src="../../assets/images/jisuanka-tb.png" alt="">
            <p>结算卡变更</p>
          </div>
          <div @click="goPage(3)">
            <img src="../../assets/images/mendianrenzheng-tb.png" alt="">
            <p>门店实名认证</p>
          </div>
          <div @click="openshop('yinxiangjiebang')">
            <img src="../../assets/images/yinxiangjiebang-tb.png" alt="">
            <p>音响解绑</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import customHeader from "../../components/header/header.vue";
import jsBridge from "../../tools/jsBridge";
import { Toast } from "mint-ui";
import { bannerList } from '../../js/banner'
import StoreChoice from "../../components/StoreChoice/StoreChoice";
export default {
  components: {customHeader, StoreChoice },
  data() {
    return {
      title: '共享付',
      bannerList,
      isReset: true, //门店重置
      store: [],
      SupplierId: '',
      getSelectStoreValue:null,
    }
  },
  methods: {
    openshop(item) {
      this.$refs.StoreChoice.popupShow();
      switch (item) {
        case 'zhifushenqing':
            this.getSelectStoreValue= this.getSelectStore
          break;
        case 'jijujiebang':
          this.getSelectStoreValue = this.jijujiebang//('jijujiebang')
          break;
        case 'yinxiangjiebang':
          this.getSelectStoreValue = this.yinxiangjiebang//('yinxiangjiebang')
          break;  
        case 'yinxiangjiebang':
          this.getSelectStoreValue = this.yinxiangjiebang//('yinxiangjiebang')
          break;
        case 'jijubangdi':
          this.getSelectStoreValue = this.jijubangdi//('yinxiangjiebang')
          break;
        default:
          break;
      }
    },
    yinxiangbangdi(value, storeName) {
      this.$router.push({ path: '/binding', query: { shopId: value[0].selectKey, type: true } });
    },
    jijubangdi(value, storeName) {
      this.$router.push({ path: '/binding', query: { shopId: value[0].selectKey, type: false } });
    },
    yinxiangjiebang(value, storeName) {
      this.$router.push({ path: '/equipment', query: { shopId: value[0].selectKey,type:true } });
    },
    jijujiebang(value, storeName) {
      this.$router.push({ path: '/equipment', query: { shopId: value[0].selectKey,type:false } });
    },

    //跳转到开通支付页面
    async getSelectStore(value, storeName) {
    
      // console.log(value,storeName);
      // if (storeName === "全部门店") {
      //   this.isAllStore = true;
      // } else {
      //   this.isAllStore = false;
      // }
      // this.store = value;
    //  await this.getMYDetail()
      // console.log(this.SupplierId,'this.SupplierId');
      //this.$router.push({ path: '/operation/storeList/storeApply/openPayment', query: { shopId: value[0].selectKey, supplierId:this.SupplierId, includeSimilarEntry: false } });
      this.$router.push({path: '/operation/storeList/storeApply/openPayment'})
    },
   async getMYDetail() {
    await  this.ajax({
        url: "/newapp/user/info.do",
        type: "get",
        controlLoading: true,
      })
        .then((res) => {
          console.log(res);
          if (res.success) {
            if (res.resultObject) {
              this.data = res.resultObject;
              this.SupplierId = res.resultObject.yzSupplierId
            } else {
              Toast(res.msg);
            }
          } else {
            Toast(res.msg);
          }
        })
        .catch((err) => {
          Toast(err.msg);
        });
    },
    goPage( type, path = '', query = {}) {
      if(type === 1) {
        this.$router.push(
          { path: `/${path}`, query }
        );
      } else if (type === 2) {
        jsBridge.goNativePage({pageName: path});
      } else {
        Toast('近期上线，敬请期待...')
      }
    },
    goBack() {
      if (String(this.$route.query.close) === 'true') {
        jsBridge.closeWindow();
      } else {
        this.$router.back();
      }
    }
  }
}
</script>
<style lang="scss">
@import "../../style/public";
.whl-finance-child {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .whl-banner {
    width: pw(355);
    height: pw(90);
    margin: 0 auto;
    margin-top: pw(5);
    border-radius: pw(10);
    .whl-banner-img {
      width: pw(355);
      height: pw(90);
    }
    .is-active {
      background-color: #fff !important;
    }
    .mint-swipe-indicator {
      background: #fff !important;
    }
  }
  .whl-box {
    width: pw(355);
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    border-radius: pw(10);
    padding-bottom: pw(10);
    margin-top: pw(10);
    &>div {
      width: 100%;
      height: auto;
      overflow: hidden;
      display: grid;
      grid-template-rows: repeat(1, 1fr);
      grid-template-columns: repeat(2, 2fr);
      grid-gap: pw(10);
      box-sizing: border-box;
      &>div {
        width: 100%;
        height: pw(50);
        background-color: #FFF;
        border-radius: pw(4);
        display: flex;
        align-items: center;
        color: #333;
        font-size: pw(14);
        padding: pw(10);
        box-sizing: border-box;
        &>img {
          width: pw(30);
          height: pw(30);
        }
        &>p {
          margin-left: pw(10);
        }
      }
    }
  }
  .whl-gap {
    width: 100%;
    height: pw(50);
  }
}
</style>
